<template>
  <div>
    <div data-v-c80f0b60 class="cart shoppin-cart">
      <div data-v-c80f0b60 class="box">
        <div
          data-v-c80f0b60=""
          class="mescroll bottomStyle1 mescroll-bar"
          style="top: 0px"
        >
          <div data-v-c80f0b60="">
            <!-- 购物车空空如也 -->
            <div data-v-c80f0b60="" v-if="supplierList.length == 0">
              <div data-v-c80f0b60="" class="cartEmpty">
                <img
                  data-v-c80f0b60=""
                  src="https://images.yaodouwang.com/img/blankpage/shppingCart-blank.png"
                  alt=""
                  class="pc-shoppingCart-img"
                  style="
                    width: 2rem;
                    height: 2rem;
                    display: block;
                    margin: 0px auto;
                  "
                />
                <p data-v-c80f0b60="" class="color-666 font-px26 text-cen">
                  购物车空空如也〜
                </p>
                <router-link
                  data-v-c80f0b60=""
                  class="btn-purchase"
                  to="/"
                  tag="button"
                >
                  去商城首页
                </router-link>
              </div>
            </div>
            <!-- 购物车内有商品 -->
            <!-- 如果选中 class为checked  未选中为no-check -->
            <div data-v-c80f0b60="" v-if="supplierList.length > 0">
              <div data-v-c80f0b60="" class="cart-fun">
                <p data-v-c80f0b60="" class="font-px30 color-999">
                  共{{ totalCount }}件商品
                </p>
                <p
                  @click="handleChangeState"
                  data-v-c80f0b60=""
                  class="font-px30 color-333"
                >
                  {{ isChangeState ? "编辑" : "完成" }}
                </p>
              </div>
              <!---->
              <div data-v-c80f0b60="">
                <div
                  data-v-c80f0b60=""
                  class="g-bg bg-fff pc-g-bg"
                  v-for="supplier in supplierList"
                  :key="supplier.supplierId + supplier.subGrandTotal"
                >
                  <ul
                    data-v-c80f0b60=""
                    class="list-box padding-updown-20 mg-bottom-px30"
                  >
                    <li
                      data-v-c80f0b60=""
                      class="cart-normal color-666 font-px28"
                    >
                      <div data-v-c80f0b60="" class="store-name">
                        <div data-v-c80f0b60="" class="tit-cbox pc-tit-cbox">
                          <span
                            data-v-c80f0b60=""
                            @click="storeChecked(supplier)"
                            ><i
                              data-v-c80f0b60=""
                              :class="
                                supplier.supplierChecked
                                  ? 'checked'
                                  : 'no-check'
                              "
                            ></i
                          ></span>
                        </div>
                        &nbsp;&nbsp;
                        <img
                          data-v-c80f0b60=""
                          src=""
                          alt=""
                        />
                        <span
                          data-v-c80f0b60=""
                          class="store-title one-txt-cut"
                          >{{ supplier.groupName }}</span
                        >
                        <img
                          data-v-c80f0b60=""
                          src=""
                          alt=""
                          class="store-title-right"
                        />
                        <span
                          data-v-c80f0b60=""
                          class="store-title"
                          v-if="supplier.foreignTradeService"
                          >【北京保税仓】</span
                        >
                        <!---->
                        <!---->
                      </div>
                      <!---->
                    </li>
                    <li
                      @click="linkToDetail(good.productId)"
                      data-v-c80f0b60=""
                      v-for="good in supplier.productList"
                      :key="good.productId + good.totalPrice"
                    >
                      <div data-v-c80f0b60="" class="c-warp c-bor">
                        <div data-v-c80f0b60="" class="tit-cbox pc-tit-cbox">
                          <span
                            @click.stop="radioChecked(good)"
                            data-v-c80f0b60=""
                            ><i
                              data-v-c80f0b60=""
                              :class="good.check ? 'checked' : 'no-check'"
                            ></i
                          ></span>
                        </div>
                        <div data-v-c80f0b60="" class="tit-rbox">
                          <div data-v-c80f0b60="" class="tit-up">
                            <div data-v-c80f0b60="" class="c-cp active">
                              <!---->
                              <!---->
                              <img
                                data-v-c80f0b60=""
                                :src="good.imageUrl"
                                alt="商品图"
                              />
                              <!---->
                              <!---->
                            </div>
                            <div data-v-c80f0b60="" class="c-col">
                              <div data-v-c80f0b60="">
                                <div data-v-c80f0b60="" class="t-box">
                                  <span data-v-c80f0b60=""
                                    >{{ good.internalName }}
                                  </span>
                                </div>
                                <span data-v-c80f0b60="" class="t-txt">{{
                                  good.productSize
                                }}</span>
                                <br data-v-c80f0b60="" />
                                <!---->
                              </div>
                              <div data-v-c80f0b60="" class="icon-box"></div>
                              <div data-v-c80f0b60="" class="t-bot">
                                <span data-v-c80f0b60="" class="t-bbox"
                                  ><div
                                    data-v-940a8318=""
                                    data-v-c80f0b60=""
                                    class="money_show"
                                  >
                                    <span data-v-940a8318="" class="now_money">
                                      ¥<span
                                        data-v-940a8318=""
                                        class="money_show_span"
                                        >{{ parseInt(good.price) }}</span
                                      ><span data-v-940a8318=""
                                        >.{{ handlePrice(good.price) }}</span
                                      ></span
                                    >
                                  </div></span
                                >
                                <!-- 完成状态没有增加数量这部分 -->
                                <div
                                  data-v-c80f0b60=""
                                  class="c-add"
                                  v-if="isChangeState"
                                >
                                  <div
                                    data-v-c80f0b60=""
                                    class="c-l"
                                    @click.stop="handleNum(-1, good)"
                                  >
                                    <!---->
                                    <!-- https://images.yaodouwang.com/img/common/graycardSub.png -->
                                    <img
                                      data-v-c80f0b60=""
                                      src="https://images.yaodouwang.com/img/common/cardSub.png"
                                      alt=""
                                    />
                                  </div>
                                  <div data-v-c80f0b60="" class="c-c">
                                    <input
                                      data-v-c80f0b60=""
                                      type="number"
                                      class="intoNumber"
                                      :value="good.quantity"
                                    />
                                  </div>
                                  <div
                                    data-v-c80f0b60=""
                                    class="c-r"
                                    @click.stop="handleNum(1, good)"
                                  >
                                    <img
                                      data-v-c80f0b60=""
                                      src="https://images.yaodouwang.com/img/common/cardAdd.png"
                                      alt=""
                                    />
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <!---->
            </div>
            <!-- 桃心分割线部分 -->
            <div data-v-c80f0b60="" class="sale-title">
              <div data-v-c80f0b60="" class="title-line"></div>
              <img
                data-v-c80f0b60=""
                src=""
                alt=""
                class="title-img"
              />
              <p data-v-c80f0b60="" class="title-word"></p>
              <div data-v-c80f0b60="" class="title-line"></div>
            </div>
            <!-- 商品列表部分 -->
            <div data-v-c80f0b60="" class="sellWellList">
              <div
                @click="linkToDetail(good.productId)"
                data-v-4fc4293a=""
                data-v-c80f0b60=""
                class="product-list_item"
                v-for="(good, index) in cartHotList"
                :key="good.productId + good.kc + index"
              >
                <div data-v-4fc4293a="" class="product-img">
                  <img
                    v-if="good.labels.foreignTrade == 'Y'"
                    data-v-4fc4293a=""
                    src="../assets/img/kuajingshangping.png"
                    alt=""
                    class="cross-borde-icon"
                  />
                  <!---->
                  <img
                    data-v-4fc4293a=""
                    alt="商品图片"
                    :data-src="good.imageUrl"
                    :src="good.imageUrl"
                    lazy="loaded"
                  />
                  <div
                    data-v-4fc4293a=""
                    class="cross-borde-country"
                    v-if="good.labels.foreignTrade == 'Y'"
                  >
                    <img data-v-4fc4293a="" :src="good.labels.logo" alt="" />
                    <span data-v-4fc4293a="" class="country">{{
                      good.labels.country
                    }}</span>
                  </div>
                </div>
                <div data-v-4fc4293a="" class="product-info">
                  <div
                    data-v-4fc4293a=""
                    class="product-name txt-cut color-333 font-px26"
                  >
                    <span data-v-4fc4293a="">{{ good.productName }} </span>
                  </div>
                  <div data-v-4fc4293a="" class="product-store">
                    <span
                      data-v-4fc4293a=""
                      class="font-px24 color-999 vertical-middle one-txt-cut"
                      >{{ good.merchantInfo.merchantName }}</span
                    >
                    <img
                      data-v-4fc4293a=""
                      src=""
                      alt=""
                      class="vertical-middle"
                    />
                  </div>
                  <div data-v-4fc4293a="" class="product-tag">
                    <div
                      data-v-4fc4293a=""
                      class="yskMake"
                      v-if="good.labels.useHealthyCard == 'Y'"
                    >
                      药神卡
                    </div>
                    <!---->
                    <div data-v-4fc4293a="" class="quan">
                      <img
                        data-v-4fc4293a=""
                        src="https://images.yaodouwang.com/img/home/tag_coupon.png"
                        alt="券"
                        v-if="good.labels.quan == 'Y'"
                      />
                    </div>
                    <div
                      data-v-c63fad28=""
                      alt="券"
                      class="pt-icon"
                      v-if="good.labels.isGroup == 'Y'"
                    >
                      拼团
                    </div>
                    <!---->
                    <!---->
                  </div>
                  <div data-v-4fc4293a="" class="product-price">
                    <div data-v-4fc4293a="" class="product-price-left">
                      <div
                        data-v-d4462b7e=""
                        data-v-4fc4293a=""
                        class="money_show"
                        fontcolor="#FF7900"
                      >
                        <span data-v-d4462b7e="" class="now_money"
                          ><span data-v-d4462b7e=""
                            ><span data-v-d4462b7e="" class="font-px28">¥</span
                            ><span data-v-d4462b7e="" class="font-px38"
                              >{{ parseInt(good.price)
                              }}<span data-v-d4462b7e="" class="font-px26"
                                >.{{ handlePrice(good.price) }}</span
                              ></span
                            ></span
                          ></span
                        >
                      </div>
                    </div>
                    <div
                      @click.stop="handleCartAdd(good)"
                      data-v-cdd5d3c4=""
                      data-v-4fc4293a=""
                      class="cart-icon"
                    >
                      <img
                        v-if="good.labels.isGroup == 'N'"
                        data-v-cdd5d3c4=""
                        src=""
                        alt="加购物车"
                      />
                    </div>
                  </div>
                  <!---->
                </div>
              </div>
            </div>
          </div>
          <!-- 已经到底了 -->
          <div
            class="mescroll-upwarp"
            style="visibility: visible; display: none"
          >
            <p class="upwarp-progress"></p>
            <p class="upwarp-tip">——— 已经到底了———</p>
          </div>
        </div>
        <!-- 底部总计 -->
        <footer
          data-v-c80f0b60=""
          class="footer-cart"
          v-if="supplierList.length > 0"
        >
          <div data-v-c80f0b60="" class="foot-l">
            <div data-v-c80f0b60="" class="foot-all-sel pc-foot-all-sel">
              <span
                @click="handleAllCheck()"
                data-v-c80f0b60=""
                :class="isChangeState ? 'allcheck' : ''"
              >
                <!-- class="checked" 为选中状态-->
                <i
                  data-v-c80f0b60=""
                  :class="[
                    checkAll ? 'checked' : 'no-check',
                    isChangeState ? 'pc-shoppingCart-check' : 'vertical-middle',
                  ]"
                ></i>
              </span>
              &nbsp;&nbsp;&nbsp;<span data-v-c80f0b60="">全选</span>
            </div>
            <div data-v-c80f0b60="" class="foot-t" v-if="isChangeState">
              <p data-v-c80f0b60="">
                <span data-v-c80f0b60="">总计：</span>
                <span data-v-c80f0b60="" class="displayGrandTotalcss"
                  >¥ {{ countTotal.countPrice }}</span
                >
              </p>
              <!---->
            </div>
          </div>
          <div
            data-v-c80f0b60=""
            :class="[
              'foot-r',
              isChangeState ? 'main-bg-color' : 'border-979797',
            ]"
          >
            <span
              is-link
              @click="handleDelGood"
              data-v-c80f0b60=""
              :class="isChangeState ? 'color-fff' : 'color-666 font-px32'"
              >{{ isChangeState ? "去结算" : "删除" }}
            </span>
          </div>
        </footer>
      </div>
    </div>
  </div>
</template>
<script>
import {
  cartHotList,
  ownCartList,
  cartChange,
  storeChange,
  allChange,
  cartDel,
} from "../api/pjmedicinecart";
import { cartAdd } from "../api/pjmedicinecard";
import { cartvalidate } from "../api/zl-goods";
export default {
  data() {
    return {
      cartHotList: [], //购物车推荐的商品数据
      isChangeState: true, //true 为编辑状态（默认） false为完成
      supplierList: [], //购物车里面的商品列表
      checkAll: false, //全选框的状态
      show: false, //弹出层
    };
  },
  computed: {
    totalCount() {
      //购物车数据
      return this.$store.state.pjcart.countQuantity;
    },
    countTotal() {
      //总计
      return this.$store.getters["pjcart/countTotal"];
    },
  },
  watch: {
    supplierList: {
      handler: function () {
        this.$store.commit("pjcart/initSupplierList", this.supplierList);
      },
      deep: true,
    },
  },
  methods: {
    handlePrice(price) {
      price = price * 100;
      price = parseInt(price) + "";
      price = price.slice(-2);
      return price;
    },
    handleChangeState() {
      //点击改变状态 编辑或完成
      this.isChangeState = !this.isChangeState;
    },
    radioChecked(good) {
      //点击单个商品的选择框
      let modifyType = "PRO_CHECKED";
      good.check = !good.check;
      this.cartRequest(modifyType, good);
    },
    storeChecked(supplier) {
      //店铺的选择框
      let { supplierId, supplierChecked } = supplier;
      supplierChecked = !supplierChecked;
      let storeObj = {
        modifyType: "PRO_PARTY",
        supplieId: supplierId,
        ischecked: supplierChecked,
        outCrossStore: "Y",
      };
      storeChange(storeObj).then((res) => {
        ownCartList().then((res) => {
          if (res.data.supplierList) {
            this.supplierList = res.data.supplierList;
          }
          this.checkAll = res.data.checkAll;
        });
      });
    },
    handleAllCheck() {
      //全选
      let checkAll = !this.checkAll;
      let allObj = {
        modifyType: "PRO_ALL",
        ischecked: checkAll,
      };
      allChange(allObj).then((res) => {
        ownCartList().then((res) => {
          if (res.data.supplierList) {
            this.supplierList = res.data.supplierList;
          }
          this.checkAll = res.data.checkAll;
        });
      });
    },
    handleNum(num, good) {
      //数量加减
      let { quantity, quantityOnHandTotal } = good;
      num == 1 ? quantity++ : quantity--;
      quantity = quantity < 1 ? 1 : quantity;
      quantity =
        quantity > quantityOnHandTotal ? quantityOnHandTotal : quantity;
      good.quantity = quantity;
      let modifyType = "PRO_QUANTITY";
      this.cartRequest(modifyType, good);
    },
    cartRequest(modifyType, good) {
      //改变购物车里面的商品信息(数量，商品前面的单选)
      let { productId, quantity, check } = good;
      let productObj = {
        modifyType: modifyType,
        productId: productId,
        quantity: quantity,
        ischecked: check,
      };
      cartChange(productObj).then((res) => {
        ownCartList().then((res) => {
          if (res.data.supplierList) {
            this.supplierList = res.data.supplierList;
          }
          this.checkAll = res.data.checkAll;
        });
      });
    },
    handleDelGood() {
      if (!this.isChangeState) {
        //删除商品
        let productIdsObj = {
          productIds: [],
        };
        this.supplierList.forEach((supplier) => {
          for (let i = 0; i < supplier.productList.length; i++) {
            if (supplier.productList[i].check) {
              //选中状态
              productIdsObj.productIds.push(supplier.productList[i].productId);
            }
          }
        });
        if (productIdsObj.productIds.length == 0) {
          this.$toast.fail("请选择商品");
        } else {
          this.$dialog
            .confirm({
              title: "是否删除商品",
            })
            .then(() => {
              cartDel(productIdsObj).then((res) => {
                ownCartList().then((res) => {
                  //发起请求购物车里面的商品列表
                  if (res.data.supplierList) {
            this.supplierList = res.data.supplierList;
          }
                  this.checkAll = res.data.checkAll;
                });
              });
            })
            .catch(() => {});
        }
      } else {
        //去结算
        if (this.countTotal.countPrice > 0) {
          cartvalidate().then((res) => {
          });
          this.$router.push("/children/cartorder");
        } else {
          this.$toast.fail("请选择商品");
        }
      }
    },
    handleCartAdd(good) {
      //商品加入购物车
      if (this.$store.state.zlstore.userinfo) {
        let productObj = {
          cartAddVos: [{ productId: good.productId, quantity: 1 }],
          isBuy: false,
        };
        cartAdd(productObj).then((res) => {
          ownCartList().then((res) => {
            this.$toast.success("已加入购物车成功");
            //发起请求购物车里面的商品列表
            if (res.data.supplierList) {
            this.supplierList = res.data.supplierList;
          }
            this.checkAll = res.data.checkAll;
          });
        });
      } else {
        this.$toast.fail("请登录");
      }
    },
    linkToDetail(id) {
      //点击去详情页
      this.$router.push("/children/detail/" + id);
    },
  },
  created() {
    cartHotList().then((res) => {
      //发起请求得到推荐商品
      this.cartHotList = res.data.data.products;
    });
    ownCartList().then((res) => {
      //发起请求购物车里面的商品列表
      if (res.data.supplierList) {
            this.supplierList = res.data.supplierList;
          }
      this.checkAll = res.data.checkAll;
    });
  },
};
</script>

<style lang="less" scoped>
.sellWellList[data-v-c80f0b60] {
  background: #f6f6f6;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 100px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 300px;
  height: 200px;
  background-color: #fff;
}
</style>